<template>
  <div>
    <van-search
      v-model="searchValue"
      placeholder="请输入搜索关键词"
      shape="round"
      @search="onSearch"
      @cancel="onCancel"
    />
    <div class="history-bar">
      <template v-for="(item,index) in historyList">
        <van-tag
          :key="index"
          closeable
          size="medium"
          class="history-tag"
          @click="tagClick(item)"
          @close="close(item)"
        >{{item}}</van-tag>
      </template>
    </div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="company-list" v-for="(item,index) in listData" :key="index">
        <div class="company-item" @click="$router.push(`/companyInfo?id=${item.id}`)">
          <!-- <div class="left">{{item.name}}</div> -->
          <p class="name">{{item.name}}</p>
          <p class="info">{{item.basicName||'园区外'}}</p>
          <!-- <p class="info">{{item.code}}</p> -->
            <span class="info" style="float:right;textAlign:left">{{item.register&&item.register.registeredAddress}}</span>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
      listData: [],
      loading: false,
      finished: false,
      queryData: {
        pageSize: 20,
        pageNo: 1,
        // dateCheck:true
      },
      historyList: [],
    };
  },
  created() {
    this.historyList = JSON.parse(localStorage.getItem("wcListSearchHistory"));
    if(this.$route.query.type){
      this.queryData[this.$route.query.type] = true
    }
    if(sessionStorage.getItem('queryData')){
      let sessionQueryData = JSON.parse(sessionStorage.getItem('queryData'))
      for(var k in sessionQueryData){
        this.queryData[k] = sessionQueryData[k]
      }
    }
  },
  methods: {
    getList() {
      this.$api
        .enterprise({ method: "post", type: "datagrid" }, this.queryData)
        .then((res) => {
          this.listData.push(...res.data.data);
          if (this.listData.length == res.data.total)
            return (this.finished = true);
          this.queryData.pageNo++;
          this.loading = false;
        });
    },
    onSearch() {
      this.queryData.pageNo = 1;
      this.queryData.name = this.searchValue;
      if (this.searchValue.trim()) {
        this.saveSearchHistory(this.searchValue);
      }
      this.finished = false;
      this.loading = true;
      this.listData = [];
      this.onLoad();
    },
    onCancel() {
      console.log("取消");
    },
    tagClick(name) {
      this.searchValue = name;
      this.saveSearchHistory(name);
      this.onSearch();
    },
    close(name) {
      let self = this;
      this.historyList = this.historyList.filter((item) => item !== name);
      localStorage.setItem("wcListSearchHistory", JSON.stringify(self.historyList));
    },
    saveSearchHistory(name) {
      if (!localStorage.getItem("wcListSearchHistory")) {
        let arr = [name];
        arr.splice(10);
        this.historyList = arr;
        localStorage.setItem("wcListSearchHistory", JSON.stringify(arr));
      } else {
        let arr = JSON.parse(localStorage.getItem("wcListSearchHistory"));
        arr = arr.filter((x) => x != name);
        arr.unshift(name);
        arr.splice(10);
        this.historyList = arr;
        localStorage.setItem("wcListSearchHistory", JSON.stringify(arr));
      }
    },
    onLoad() {
      this.getList();
    },
  },
  computed: {},
};
</script>

<style scoped lang="less">
.history-bar {
  margin: 10px;
  overflow: hidden;
}
.history-tag {
  background: rgb(151, 149, 149);
  float: left;
  margin: 0 10px 10px 0;
}
.company-list {
  position: relative;
  margin: 0 10px;
}
.company-item {
  overflow: hidden;
  background: rgba(255, 255, 255, 1);
  border-radius: 15px;
  color: #333;
  padding: 5px 0;
  margin-bottom: 15px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.company-item div {
  float: left;
  line-height: 50px;
}
.company-item p {
  text-align: center;
  padding: 10px;
  margin: 0;
}
.company-item .info {
  text-align: right;
  font-size: 14px;
  color: #666;
  padding: 5px 30px;
}
.company-item .info span {
  margin-right: 20px;
}
.left {
  text-align: right;
  width: 48%;
}
.center {
  text-align: center;
  width: 4%;
}
.right {
  text-align: left;
  width: 48%;
}
.data-from {
  font-size: 12px;
  position: absolute;
  padding: 5px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 5px;
  background: #71bda6;
  color: #fff;
}
.data-from1 {
  background: rgba(0, 194, 151, 0.8);
}
.data-from2 {
  background: rgba(203, 222, 115, 0.8);
}
.data-from3 {
  background: rgba(238, 81, 9, 0.8);
}
</style>
